<template>
  <el-dialog title="关联终端"
             :visible.sync="dialogForm"
             width="1100px">
    <base-list ref="terminal"
               :condition="condition"
               :datas.sync="terminal"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="终端设备名称">
              <auto-search-ter @selectName="v=>condition['search_LIKE_resourceName']=v"></auto-search-ter>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终端设备类型">
              <auto-search-dic @selectName="v=>condition['search_LIKE_typeName']=v"
                               :name="condition['search_LIKE_typeName']"
                               code="JOB_ZD"></auto-search-dic>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="loadData"
                       class="ml-80">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                ref="singleTable"
                :data="terminal"
                border>
        <el-table-column label="选择"
                         width="50">
          <template slot-scope="scope">
            <el-radio class="radio"
                      v-model="radio"
                      :label="scope.row.id"
                      @change.native="getCurrentRow(scope.row)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index"
                         label="序号"
                         width="55">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="resourceName"
                         label="终端设备名称"
                         min-width="130"></el-table-column>
        <el-table-column prop="typeName"
                         label="终端设备类型"
                         min-width="130"></el-table-column>
        <el-table-column prop="ipv4"
                         label="终端设备IP"
                         min-width="200"></el-table-column>
        <el-table-column prop="orgName"
                         label="所属单位"
                         min-width="200"></el-table-column>
      </el-table>
    </base-list>

    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getJobTerminalList } from '@/api/baseResource/baseResource'
import { contactList } from '@/api/warehouseOperationPoint/warehouseOperationPoint'
import autoSearchTer from '@/components/autocomplete/autoSearchTer'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'

export default {
  name: 'terminal',
  components: {
    autoSearchTer,
    autoSearchDic
  },
  data() {
    return {
      form: this.clearForm(),
      condition: {}, // 查询条件
      terminal: [], // table数组
      pageSearch: getJobTerminalList, // 分页查询api接口
      dialogForm: false,
      currentRow: null,
      radio: ''
    }
  },
  mounted() {
    getJobTerminalList().then(res => {
      this.terminal = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name
      }
    },
    loadData() {
      this.$refs.terminal.loadData()
    },
    // 保存
    handleSubmit() {
      contactList(this.form.id, { terminals: [this.currentRow] }).then(res => {
        this.$message({ message: '终端关联成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('tload')
      })
    },
    getCurrentRow(val) {
      this.currentRow = val
    },
    rectTerminal(val) {
      // 选中关联行
      this.radio = val.terminals[0].id
      this.form.id = val.id
    }
  }
}
</script>

<style scoped>
</style>
